<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <!-- 引入 重置的样式 -->
    <link rel="stylesheet" href="../assets/reset.css">
    <!-- 引入layui的样式 -->
    <link rel="stylesheet" href="../plugin/layui/css/layui.css">
    <!-- 自定义样式 -->
    <style>
        #app {
            background: lightgray;
        }
    </style>
    <script src="../plugin/less.js"></script>
</head>

<body>
    <div id="app">
        <div class="layui-container">
            <ul class="layui-nav" style="display: flex;justify-content: space-between;">
                <li class="layui-nav-item" style="width: 120px;">
                    <span>测试面板</span>
                    <span class="layui-badge">1.0.0</span>
                </li>
                <li class="layui-nav-item" lay-unselect>
                    <a href="javascript:;">
                        <img src="../img/logo.png" class="layui-nav-img">
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" style="font-weight: bold;">俺是米小猫</a></dd>
                        <hr>
                        <dd style="text-align: center;" lay-on="exit"><a href="">退出</a></dd>
                    </dl>
                </li>
            </ul>
            <div class="layui-bg-gray" style="padding: 16px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs6">
                        <div class="layui-card">
                            <div class="layui-card-header">浏览器面板</div>
                            <div class="layui-card-body"
                                style="height: 100px;display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
                                <button type="button" class="layui-btn layui-btn-fluid"
                                    lay-on="goBrowser">启动浏览器</button>
                                <button type="button" class="layui-btn layui-btn-fluid"
                                    lay-on="goBrowserBaidu">浏览百度</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-card">
                            <div class="layui-card-header">软件面板</div>
                            <div class="layui-card-body">
                                自动测试
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-bg-gray" style="padding: 16px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-xs12">
                        <div class="layui-card">
                            <div class="layui-card-header">设备面板</div>
                            <div class="layui-card-body"
                                style="display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
                                <div style="width: 120px;text-align: center;height: 40px;">
                                    <span lay-on="test">测试</span>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 layui插件 -->
    <script src="../plugin/layui/layui.js"></script>
    <!-- 自定义脚本 -->
    <script>
        // 自定义消息通道
        function tunner(key, value) {
            window.airscript.call(key, value)
        }
        // 自定义方法
        // function show() {
        //     // let element = document.querySelector('#deviceInfo')
        //     // console.log(element)
        //     // let customElement = document.createElement('li')
        //     // customElement = str
        //     // element.appendChild(customElement)
        // } 
        
        // layui入口
        layui.use(function () {
            let util = layui.util;
            //  2.9+ 版本可省略 attr 参数，默认读取 lay-on
            util.on({
                "goBrowser": function () {
                    // console.log(this); // 当前触发事件的 DOM 元素
                    layer.msg('正在打开浏览器');
                    tunner('browser', true)
                },
                "goBrowserBaidu": function () {
                    // console.log(this); // 当前触发事件的 DOM 元素
                    layer.msg('正在打开浏览器');
                    tunner('browser-baidu', true)
                    setTimeout(() => {
                        layer.msg('3s后返回');
                        setTimeout(() => {
                            tunner('airscript', true)
                        }, 3000);
                    }, 2500)
                },
                "test": function () {
                    fun1('hello', 'world')
                },
                "exit": function () {
                    layer.msg('开始退出');
                    tunner('exit', true)
                }
            });
        })
    </script>
</body>

</html>